/* stylelint-disable no-descending-specificity */

/**
 * Dropper
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#dropper
 * Provided by macro macros/databarAuthor.html
 * Used in templates:
 * - openlibrary/templates/lists/widget.html
 */

@import (less) "less/z-index.less";

.dropit {
  position: relative;
  min-height: 50px;
  z-index: @z-index-level-4;
}

.dropper {
  &.on {
    /* stylelint-disable selector-max-specificity */
    .arrow {
      width: 23px;
      margin: 6px 5px;
      // stylelint-disable-next-line max-nesting-depth
      &.up {
        background-position: -22px 0;
      }
    }
    div.arrow-activated {
      background-image: url(/images/icons/icon_dropit.png);
      background-repeat: no-repeat;
      filter: grayscale(100%);
      background-position: 0 0;
      background-size: 45px;
    }
    div.arrow-unactivated {
      background-image: url(/images/icons/icon_dropit2.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 45px;
    }
    /* stylelint-enable selector-max-specificity */
  }
  .dropdown {
    /* stylelint-disable selector-max-specificity */
    p.create a {
      color: @dark-grey;
      text-decoration: none;
    }
    .reading-lists .reading-list-title {
      background: @white;
      padding: 5px 0 0 10px;
      margin: 0;
      font-size: .8em;
    }
    .my-lists {
      background: @white;
      max-height: 250px;
      overflow-y: auto;
      padding: 10px 15px;

      // stylelint-disable-next-line max-nesting-depth
      p a {
        display: block;
      }
      /* stylelint-enable selector-max-specificity */
    }
  }
}

/* stylelint-disable selector-max-specificity */
div#subjectLists {
  div.dropit {
    h3 {
      font-weight: normal;
      margin: 0;
      padding: 5px;
    }
    p.listed {
      color: @grey;
      font-size: .8125em;
      padding: 0 0 0 42px;
      margin: 0 0 5px;
    }
  }
  div.dropper {
    position: absolute;
    top: 0;
    left: 32px;
    width: 230px;
    z-index: @z-index-level-7;

    &.on {
      background-color: @lightest-grey;
      border: 1px solid @mid-grey;
      border-radius: 4px;
    }
    h3 {
      font-size: 1.125em;
      font-weight: 700;
      color: @black;
      min-height: 1.125em;
      width: auto;
    }
    div.dropdown {
      display: none;
      padding-top: 10px;
      /* stylelint-disable max-nesting-depth */
      p {
        font-size: .875em;
        margin: 0 0 5px;
        color: @grey;
        a {
          font-size: .875em;
        }
        span {
          font-size: .8125em;
        }
      }
      /* stylelint-enable max-nesting-depth */
    }
  }
}

.widget-add {
  div.dropper {
    div.dropdown p.create {
      border-top: 1px solid @lightest-grey;
      padding: 5px 10px;
      text-decoration: none;
      font-weight: bold;
    }
  }
  &.old-style-lists {
    div.dropper {
      margin: 0;
      top: 0;
      position: absolute;
    }
  }
}

div.Tools {
  div.dropper {
    z-index: @z-index-level-14;

    &.on {
      background-color: @lightest-grey;
      border: 1px solid @mid-grey;
      border-radius: 4px;
      width: 100%;
    }

    h3 {
      font-size: 1.125em;
      font-weight: 700;
      color: @black;
      min-height: 1.125em;
      width: auto;
    }

    div.dropdown {
      border-top: 1px solid @lighter-grey;
      display: none;
      /* stylelint-disable max-nesting-depth */
      p {
        font-size: .875em;
        padding-left: 0;
        margin-bottom: 5px;
        margin-top: 0;
        color: @grey;
        span {
          font-size: .8125em;
        }
        a {
          font-size: .875em;
        }
      }
      /* stylelint-enable max-nesting-depth */
    }
  }

  div.dropit {
    p.listed {
      color: @grey;
      font-size: .8125em;
      padding: 0 0 0 42px;
      margin: 0 0 5px;
    }
  }

  // Where is widget-add.old-style-lists used?
  // It's used on authors pages!
  // And Orphaned Editions (no work)
  .widget-add.old-style-lists {
    .dropclick {
      padding: 10px;
      text-decoration: none;

      /* stylelint-disable-next-line max-nesting-depth */
      h3 {
        font-size: .75em;
        text-align: left;
        padding: 0px 10px;
        min-width: 150px;
      }
    }
  }
}

div#listsWork {
  div.dropit {
    p.listed {
      color: @grey;
      font-size: .8125em;
      padding: 0 0 0 42px;
      margin: 0 0 5px;
    }
  }
  div.dropper {
    position: absolute;
    top: 0;
    left: 32px;
    width: 161px;
    z-index: @z-index-level-7;
    &.on {
      background-color: @lightest-grey;
      border: 1px solid @mid-grey;
      border-radius: 4px;
    }
    h3 {
      font-size: 1.125em;
      font-weight: 700;
      color: @black;
      min-height: 1.125em;
      width: auto;
    }
    div.dropdown {
      border-top: 1px solid @lighter-grey;
      display: none;
      padding-top: 10px;
      /* stylelint-disable max-nesting-depth */
      p {
        font-size: .875em;
        padding-left: 0;
        margin-bottom: 5px;
        color: @grey;
        a {
          font-size: .875em;
        }
        span {
          font-size: .8125em;
        }
      }
      /* stylelint-enable max-nesting-depth */
    }
  }
}
/* stylelint-enable selector-max-specificity */

// The log work will always be a child of .dropper
.log-work {
  .display-flex();
  form {
    flex: 1;
  }
  button[type=submit] {
    background-color: inherit;
    border: none;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
    padding: 7px 0;
    margin: 0;

    /* stylelint-disable selector-max-specificity */
    &.activated {
      color: @dark-grey;
      background: @lightest-grey;
      border: 2px solid @grey-f3f3f3;
      border-right: 1px solid @lighter-grey;
    }
    &.unactivated {
      color: @white;
      background: @green-three;
      border: 2px solid @green-four;
      border-right: 1px solid @green-two;
    }
    span.activated-check {
      color: @green;
      margin-right: 2px;
    }
    /* stylelint-enable selector-max-specificity */
  }
}

// The indicator that appears to the right of the dropper component
.dropclick {
  .display-flex();
  h3 {
    flex: 1;
  }

  .arrow {
    width: 20px;
    margin: 5px;
    margin-top: 10px;
  }
}

.dropclick-prevent {
  .display-flex();
}

.dropclick-unactivated {
  background-color: @green-five;
}

.user-book-options {
  div.tools-override {
    /* stylelint-disable selector-max-specificity */
    div.dropit {
      margin: 0;
      position: relative;
      width: auto;
    }
    /* stylelint-enable selector-max-specificity */
  }
}

div.tools-override {
  div.dropper {
    z-index: @z-index-level-14;
    top: unset;
    left: -1px;
    margin: auto;
  }
}

a:hover > h3 {
    text-decoration: underline;
}
a.dropclick.plain {
  text-decoration: none;
}


@media only screen and (min-width: @width-breakpoint-tablet) {
  div.Tools {
    div.dropper {
      position: absolute;
    }
  }

  div.tools-override {
    div.dropper {
      width: 180px;
    }
  }
}
